import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Icon } from 'antd';
import styles from './Login.less';

const FormItem = Form.Item;

@connect(state => ({
  user: state.user,
  loading: state.loading, // 监听异步事件
}))
@Form.create()
class Login extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields({ force: true },
      (err, values) => {
        if (!err) {
          this.props.dispatch({
            type: 'user/login',
            payload: values,
          });
        }
      }
    );
  }

  render() {
    const { form: { getFieldDecorator } } = this.props;
    const loading = this.props.loading.effects['user/login'];
    return (
      <Form onSubmit={this.handleSubmit} className={styles.form}>
        <FormItem className={styles.login}>
          登录
        </FormItem>
        <FormItem>
          {getFieldDecorator('phone', {
            rules: [{
              required: true, message: '请输入注册手机号！',
            }, {
              pattern: /^1\d{10}$/, message: '手机号格式错误！',
            }],
          })(
            <Input
              size="large"
              prefix={<Icon type="user" className={styles.prefixIcon} />}
              placeholder="输入手机号"
            />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: '请输入密码！',
            }],
          })(
            <Input
              size="large"
              prefix={<Icon type="lock" className={styles.prefixIcon} />}
              type="password"
              placeholder="输入密码"
            />
          )}
        </FormItem>
        <FormItem>
          <Button size="large" loading={loading} className={styles.submit} type="primary" htmlType="submit">
            登录
          </Button>
        </FormItem>
      </Form>
    );
  }
}
export default Login;
